<template>
  <div class="main-page">
    <div class="page-header">
      <div class="page-header-title">购房意愿分析</div>
      <div class="bcak-home-btn" @click="goBackHomePage()">返回上一页</div>
    </div>
    <div class="main-content">
      <el-row :gutter="30">
        <!-- 拥有房屋套数占比 -->
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span>购房人拥有房屋套数占比</span>
              <div class="page-header-filtrate page-header-filtrate2" style="position: absolute; right: 0">
                <month-range-time-filtrate-public
                  class="page-header-filtrate-month-range"
                  :month-range="monthRange2"
                  @changeFiltrateTime="changeMonthRange2"
                />
              </div>
            </div>
            <div class="module-item-content h263">
              <div class="dw">面积（万m²）</div>
              <pie-pbulic
                @click="fullSc('pie-pbulic', personHouseData.getPurchaseProportionData)"
                v-if="Object.keys(personHouseData.getPurchaseProportionData).length > 0"
                :housingSupplyStatsData="personHouseData.getPurchaseProportionData"
                class="h263"
                style="width: 100%"
              ></pie-pbulic>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span class="fz14 ml15">1套房屋</span>
              <div class="page-header-filtrate page-header-filtrate1">
                <month-range-time-filtrate-public
                  class="page-header-filtrate-month-range"
                  :month-range="monthRange3"
                  @changeFiltrateTime="changeMonthRange3"
                />
              </div>
              <el-tabs style="right: 0px" v-model="listInd1" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd1')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content h263">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getMonitorSaleAreaData)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getMonitorSaleAreaData).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorSaleAreaData"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span class="fz14 ml15">2套房屋</span>
              <div class="page-header-filtrate page-header-filtrate1">
                <month-range-time-filtrate-public
                  class="page-header-filtrate-month-range"
                  :month-range="monthRange4"
                  @changeFiltrateTime="changeMonthRange4"
                />
              </div>
              <el-tabs style="right: 0px" v-model="listInd2" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd2')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content h263">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getMonitorSaleAreaData2)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getMonitorSaleAreaData2).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorSaleAreaData2"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span class="fz12 ml15">3套及以上</span>
              <div class="page-header-filtrate page-header-filtrate1">
                <month-range-time-filtrate-public
                  class="page-header-filtrate-month-range"
                  :month-range="monthRange5"
                  @changeFiltrateTime="changeMonthRange5"
                />
              </div>
              <el-tabs style="right: 0px" v-model="listInd3" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd3')">
                <el-tab-pane
                  v-for="(item, index) of currentMonthAccumulationTabs"
                  :key="item.value"
                  :label="item.label"
                  :name="item.value"
                ></el-tab-pane>
              </el-tabs>
            </div>
            <div class="module-item-content h263">
              <bar-line-pbulic
                @click="fullSc('bar-line-pbulic', personHouseData.getMonitorSaleAreaData3)"
                class="h263"
                style="width: 100%"
                v-if="Object.keys(personHouseData.getMonitorSaleAreaData3).length > 0"
                :housingSupplyStatsData="personHouseData.getMonitorSaleAreaData3"
              ></bar-line-pbulic>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="page-header-title1">
            外地居民首套购房
            <div class="page-header-filtrate">
              <public-change-province-city :cityList="[{ name: '辽宁省', code: '210000' }, ...mapList]" :currentCity="cityObj1.code" @changeCity="changeCity1" />
              <month-range-time-filtrate-public
                class="page-header-filtrate-month-range"
                :month-range="monthRange1"
                @changeFiltrateTime="changeMonthRange1"
              />
            </div>
          </div>
          <!-- 外地居民购房统计 -->
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="module-item dominance-inventory-sales-cycle">
                <div class="module-item-title">
                  <span>外地居民首套购房面积统计</span>
                  <span style="margin-right: 20px">外地居民首套购房龄统计</span>
                </div>
                <div class="module-item-content h222">
                  <el-row :gutter="30">
                    <el-col :span="12">
                      <pie-pbulic-one
                        @click="fullSc('pie-pbulic-one', personHouseData.getForeignPlacePurchaseAreaData)"
                        v-if="Object.keys(personHouseData.getForeignPlacePurchaseAreaData).length > 0"
                        :housingSupplyStatsData="personHouseData.getForeignPlacePurchaseAreaData"
                        class="h222"
                        style="width: 100%"
                      ></pie-pbulic-one
                    ></el-col>
                    <el-col :span="12">
                      <pie-pbulic-two
                        @click="fullSc('pie-pbulic-two', personHouseData.getForeignPlacePurchaseAgePieData)"
                        v-if="Object.keys(personHouseData.getForeignPlacePurchaseAgePieData).length > 0"
                        :housingSupplyStatsData="personHouseData.getForeignPlacePurchaseAgePieData"
                        class="h222"
                        style="width: 100%"
                      ></pie-pbulic-two>
                    </el-col>
                  </el-row>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="module-item dominance-inventory-sales-cycle">
                <div class="module-item-title">
                  <span style="margin-left: 0" class="fz12">外地居民首套购房来源地及购买意愿分析</span>
                  <el-tabs style="right: 0" v-model="listInd4" class="module-item-title-tabs" @tab-change="changeTab($event, 'listInd4')">
                    <el-tab-pane
                      v-for="(item, index) of currentMonthAccumulationTabs"
                      :key="item.value"
                      :label="item.label"
                      :name="item.value"
                    ></el-tab-pane>
                  </el-tabs>
                </div>
                <div class="module-item-content h222">
                  <bar-line-pbulic
                    @click="fullSc('bar-line-pbulic', personHouseData.getMonitorSaleAreaData4)"
                    class="h222"
                    style="width: 100%"
                    v-if="Object.keys(personHouseData.getMonitorSaleAreaData4).length > 0"
                    :housingSupplyStatsData="personHouseData.getMonitorSaleAreaData4"
                  ></bar-line-pbulic>
                </div>
              </div>
            </el-col>
          </el-row>
          <div class="page-header-title1">
            刚需改善购房统计
            <div class="page-header-filtrate">
              <month-range-time-filtrate-public
                class="page-header-filtrate-month-range"
                :month-range="monthRange6"
                @changeFiltrateTime="changeMonthRange6"
              />
            </div>
          </div>
          <!-- 刚需改善购房统计 -->
          <el-row :gutter="30">
            <el-col :span="12">
              <div class="module-item dominance-inventory-sales-cycle">
                <div class="module-item-title">
                  <span>各城市刚需改善购房统计</span>
                </div>
                <div class="module-item-content h222">
                  <bar-line-pbulic
                    @click="fullSc('bar-line-pbulic', personHouseData.getPurchaseAspirationStatisticsBarData)"
                    class="h222"
                    style="width: 100%"
                    v-if="Object.keys(personHouseData.getPurchaseAspirationStatisticsBarData).length > 0"
                    :housingSupplyStatsData="personHouseData.getPurchaseAspirationStatisticsBarData"
                  ></bar-line-pbulic>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="module-item dominance-inventory-sales-cycle">
                <div class="module-item-title">
                  <span>刚需改善购房趋势</span>
                </div>
                <div class="module-item-content h222">
                  <bar-line-pbulic
                    @click="fullSc('bar-line-pbulic', personHouseData.getPurchaseAspirationStatisticsLineData)"
                    class="h222"
                    style="width: 100%"
                    v-if="Object.keys(personHouseData.getPurchaseAspirationStatisticsLineData).length > 0"
                    :housingSupplyStatsData="personHouseData.getPurchaseAspirationStatisticsLineData"
                  ></bar-line-pbulic>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>

        <el-col :span="12">
          <div class="page-header-title1">
            外地居民首套购房来源地
            <div class="page-header-filtrate">
              <public-change-province-city :cityList="mapList" :currentCity="cityObj.code" @changeCity="changeCity" />
              <month-range-time-filtrate-public
                class="page-header-filtrate-month-range"
                :month-range="monthRange"
                @changeFiltrateTime="changeMonthRange"
              />
            </div>
          </div>
          <div class="module-item dominance-inventory-sales-cycle">
            <div class="module-item-title">
              <span></span>
            </div>

            <div class="module-item-content h558">
              <div class="big-screen" @click="fullScMap('mapBox', personHouseData.personHouseMiddleData)"></div>
              <mapBox
                ref="childRef"
                class="h558"
                v-if="Object.keys(personHouseData.personHouseMiddleData).length > 0"
                :housingSupplyStatsData="personHouseData.personHouseMiddleData"
                style="width: 100%; height: 80%"
              ></mapBox>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
    <el-dialog v-model="personHouseData.dialogVisible" width="60%">
      <component
        :is="personHouseData.componentName"
        v-if="personHouseData.dialogVisible"
        :housingSupplyStatsData="personHouseData.componentParams"
        :max="personHouseData.max"
        :min="personHouseData.min"
        :type="1"
        :style="{ height: pxToRem(500) + 'px' }"
      ></component>
    </el-dialog>

    <el-dialog v-model="personHouseData.dialogVisibleMap" width="80%">
      <component
        :is="personHouseData.componentName"
        v-if="personHouseData.dialogVisibleMap"
        :housingSupplyStatsData="personHouseData.componentParams"
        :max="personHouseData.max"
        :min="personHouseData.min"
        :type="1"
        :style="{ height: pxToRem(800) + 'px' }"
      ></component>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import barLinePbulic from "@/components/simulatedPredictionTwo/barLinePbulic.vue";
import piePbulic from "@/components/simulatedPredictionTwo/pie.vue";
import piePbulicOne from "@/components/simulatedPredictionTwo/pieOne.vue";
import piePbulicTwo from "@/components/simulatedPredictionTwo/pieTwo.vue";
import mapBox from "@/components/simulatedPredictionTwo/map.vue";
export default {
  components: { barLinePbulic, piePbulic, piePbulicOne, piePbulicTwo, mapBox },
};
</script>
<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import publicChangeProvinceCity from "@/components/housePropertyDevelopmentConstruction/publicChangeProvinceCity.vue";
import monthRangeTimeFiltratePublic from "@/components/housePropertyDevelopmentConstruction/timeFiltratePublic.vue";
import {
  getForeignPlaceFirstPurchaseFly,
  getPurchaseProportion,
  getPurchaseAreaBar,
  getForeignPlacePurchaseAreaPie,
  getForeignPlacePurchaseAgePie,
  getForeignPlacePurchaseBar,
  getPurchaseAspirationStatisticsBar,
  getPurchaseAspirationStatisticsLine,
} from "@/api/simulatedPredictionTwo";
import { barLineParamsData } from "@/utils/chartsPbulic";
import usePropertyAlertResale from "@/hooks/simulatedPredictionTwo/useSimulatedPredictionTwo";
import { pxToRem } from "@/utils/index";
const personHouseData = usePropertyAlertResale();
const monthRange = ref<any>(null); // 月范围筛选
const monthRange1 = ref<any>(null); // 月范围筛选
const monthRange2 = ref<any>(null); // 月范围筛选
const monthRange3 = ref<any>(null); // 月范围筛选
const monthRange4 = ref<any>(null); // 月范围筛选
const monthRange5 = ref<any>(null); // 月范围筛选
const monthRange6 = ref<any>(null); // 月范围筛选
const route = useRoute();
const router = useRouter();
const listInd1 = ref(1);
const listInd2 = ref(1);
const listInd3 = ref(1);
const listInd4 = ref(1);

// 切换
const changeTab = (event: any, module: string) => {
  if (module == "listInd1") {
    listInd1.value = event;
    getPurchaseAreaBarFun1();
  }
  if (module == "listInd2") {
    listInd2.value = event;
    getPurchaseAreaBarFun2();
  }
  if (module == "listInd3") {
    listInd3.value = event;
    getPurchaseAreaBarFun3();
  }
  if (module == "listInd4") {
    listInd4.value = event;
    getPurchaseAreaBarFun4();
  }
};

// 外地居民首套购买来源 飞线图
const personHouseMiddle = async () => {
  let lineData = await getForeignPlaceFirstPurchaseFly({
    cityCode: cityObj.value.code,
    startDate: monthRange.value[0],
    endDate: monthRange.value[1],
  });
  let paramsData = {
    lineData: lineData.data,
  };
  personHouseData.personHouseMiddleData = paramsData;
};
// 首套/二套/多套购房占比 首行图1 饼图
const getPurchaseProportionFun = async () => {
  let { data } = await getPurchaseProportion({
    startDate: monthRange2.value[0],
    endDate: monthRange2.value[1],
  });
  let params = {
    innerColor: ["#2586EE", "#67EB7D", "#E5FC64", "#F0C34B", "#E4871D", "#E55151"],
    innerCircle: data,
  };
  personHouseData.getPurchaseProportionData = params;
};

//首套购房 二套购房 多套购房 首行柱形图
const getPurchaseAreaBarFun1 = async () => {
  let { data } = await getPurchaseAreaBar({
    queryType1: listInd1.value,
    queryType2: 1,
    startDate: monthRange3.value[0],
    endDate: monthRange3.value[1],
  });
  let legendStyle = {
    show: true,
    icon: "circle", // 设置为圆点模式
    left: 20,
    top: 10,
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 5,
  };
  let gridConfig = {
    left: "3%",
    right: "0%",
    bottom: "5%",
    top: "32%",
  };
  let datay = data.yAxis.map((item: any) => {
    return item.name;
  });
  let lineArr = data.yAxis.map((item: any) => {
    return {
      name: "bar",
      type: "1",
      areaStyleType: "1",
      stack: "2",
    };
  });
  let dataArr = data.yAxis.map((item: any) => {
    return item.value;
  });

  let colorArr = [
    {
      a: "#FFC352",
      b: "#FFC352",
    },
    {
      a: "#5ABE52",
      b: "#5ABE52",
    },
    {
      a: "#0E81FF",
      b: "#0E81FF",
    },
    {
      a: "#594BF0",
      b: "#594BF0",
    },
    {
      a: "#24E1E7",
      b: "#24E1E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
  ];
  let colorNewArr = colorArr.slice(0, data.yAxis.length);
  let paramsData = barLineParamsData(
    datay,
    data.XAxis,
    [
      {
        name: "单位：万m²",
        type: "1",
      },
    ],
    lineArr,
    dataArr,
    colorNewArr,
    legendStyle,
    gridConfig
  );
  personHouseData.getMonitorSaleAreaData = paramsData;
};
const getPurchaseAreaBarFun2 = async () => {
  let { data } = await getPurchaseAreaBar({
    queryType1: listInd2.value,
    queryType2: 2,
    startDate: monthRange4.value[0],
    endDate: monthRange4.value[1],
  });
  let legendStyle = {
    show: true,
    icon: "circle", // 设置为圆点模式
    left: 20,
    top: 10,
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 5,
  };
  let gridConfig = {
    left: "3%",
    right: "0%",
    bottom: "5%",
    top: "32%",
  };
  let datay = data.yAxis.map((item: any) => {
    return item.name;
  });
  let lineArr = data.yAxis.map((item: any) => {
    return {
      name: "bar",
      type: "1",
      areaStyleType: "1",
      stack: "2",
    };
  });
  let dataArr = data.yAxis.map((item: any) => {
    return item.value;
  });

  let colorArr = [
    {
      a: "#FFC352",
      b: "#FFC352",
    },
    {
      a: "#5ABE52",
      b: "#5ABE52",
    },
    {
      a: "#0E81FF",
      b: "#0E81FF",
    },
    {
      a: "#594BF0",
      b: "#594BF0",
    },
    {
      a: "#24E1E7",
      b: "#24E1E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
  ];
  let colorNewArr = colorArr.slice(0, data.yAxis.length);
  let paramsData = barLineParamsData(
    datay,
    data.XAxis,
    [
      {
        name: "单位：万m²",
        type: "1",
      },
    ],
    lineArr,
    dataArr,
    colorNewArr,
    legendStyle,
    gridConfig
  );
  personHouseData.getMonitorSaleAreaData2 = paramsData;
};
const getPurchaseAreaBarFun3 = async () => {
  let { data } = await getPurchaseAreaBar({
    queryType1: listInd3.value,
    queryType2: 3,
    startDate: monthRange5.value[0],
    endDate: monthRange5.value[1],
  });
  let legendStyle = {
    show: true,
    icon: "circle", // 设置为圆点模式
    left: 20,
    top: 10,
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 5,
  };
  let gridConfig = {
    left: "3%",
    right: "0%",
    bottom: "5%",
    top: "32%",
  };
  let datay = data.yAxis.map((item: any) => {
    return item.name;
  });
  let lineArr = data.yAxis.map((item: any) => {
    return {
      name: "bar",
      type: "1",
      areaStyleType: "1",
      stack: "2",
    };
  });
  let dataArr = data.yAxis.map((item: any) => {
    return item.value;
  });

  let colorArr = [
    {
      a: "#FFC352",
      b: "#FFC352",
    },
    {
      a: "#5ABE52",
      b: "#5ABE52",
    },
    {
      a: "#0E81FF",
      b: "#0E81FF",
    },
    {
      a: "#594BF0",
      b: "#594BF0",
    },
    {
      a: "#24E1E7",
      b: "#24E1E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
  ];
  let colorNewArr = colorArr.slice(0, data.yAxis.length);
  let paramsData = barLineParamsData(
    datay,
    data.XAxis,
    [
      {
        name: "单位：万m²",
        type: "1",
      },
    ],
    lineArr,
    dataArr,
    colorNewArr,
    legendStyle,
    gridConfig
  );
  personHouseData.getMonitorSaleAreaData3 = paramsData;
};
const getPurchaseAreaBarFun4 = async () => {
  let { data } = await getForeignPlacePurchaseBar({
    queryType1: listInd4.value,
    cityCode: cityObj1.value.code,
    startDate: monthRange1.value[0],
    endDate: monthRange1.value[1],
  });
  let legendStyle = {
    show: true,
    icon: "circle", // 设置为圆点模式
    left: 20,
    top: 10,
    itemWidth: 10,
    itemHeight: 10,
    itemGap: 5,
  };
  let gridConfig = {
    left: "3%",
    right: "0%",
    bottom: "5%",
    top: "32%",
  };
  let datay = data.yAxis.map((item: any) => {
    return item.name;
  });
  let lineArr = data.yAxis.map((item: any) => {
    return {
      name: "bar",
      type: "1",
      areaStyleType: "1",
      stack: "2",
    };
  });
  let dataArr = data.yAxis.map((item: any) => {
    return item.value;
  });

  let colorArr = [
    {
      a: "#FFC352",
      b: "#FFC352",
    },
    {
      a: "#5ABE52",
      b: "#5ABE52",
    },
    {
      a: "#0E81FF",
      b: "#0E81FF",
    },
    {
      a: "#594BF0",
      b: "#594BF0",
    },
    {
      a: "#24E1E7",
      b: "#24E1E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
    {
      a: "#4F73E7",
      b: "#4F73E7",
    },
  ];
  let colorNewArr = colorArr.slice(0, data.yAxis.length);
  let paramsData = barLineParamsData(
    datay,
    data.XAxis,
    [
      {
        name: "单位：万m²",
        type: "1",
      },
    ],
    lineArr,
    dataArr,
    colorNewArr,
    legendStyle,
    gridConfig
  );
  personHouseData.getMonitorSaleAreaData4 = paramsData;
};
const getPurchaseAspirationStatisticsBarFun = async () => {
  let { data } = await getPurchaseAspirationStatisticsBar({
    startDate: monthRange6.value[0],
    endDate: monthRange6.value[1],
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 100,
    top: 10,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "3%",
    right: "0%",
    bottom: "5%",
    top: "24%",
  };
  let paramsData = barLineParamsData(
    ["卖旧买新", "外地居民首套购房"],
    data.XAxis,
    [
      {
        name: "单位：万m²",
        type: "1",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis1, data.yAxis2],
    [
      {
        a: "#FFC352",
        b: "#FFC352",
      },
      {
        a: "#67EB7D",
        b: "#67EB7D",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.getPurchaseAspirationStatisticsBarData = paramsData;
};
const getPurchaseAspirationStatisticsLineFun = async () => {
  let { data } = await getPurchaseAspirationStatisticsLine({
    startDate: monthRange6.value[0],
    endDate: monthRange6.value[1],
  });
  let legendStyle = {
    show: true,
    icon: "",
    left: 100,
    top: 10,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "3%",
    right: "0%",
    bottom: "5%",
    top: "24%",
  };
  let paramsData = barLineParamsData(
    ["卖旧买新", "外地居民首套购房"],
    data.XAxis,
    [
      {
        name: "单位：万m²",
        type: "1",
      },
    ],
    [
      {
        name: "line",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis1, data.yAxis2],
    [
      {
        a: "#FFC352",
        b: "#FFC352",
      },
      {
        a: "#67EB7D",
        b: "#67EB7D",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData.getPurchaseAspirationStatisticsLineData = paramsData;
};

const getForeignPlacePurchaseAreaPieFun = async () => {
  let { data } = await getForeignPlacePurchaseAreaPie({
    cityCode: cityObj1.value.code,
    startDate: monthRange1.value[0],
    endDate: monthRange1.value[1],
  });
  let params = {
    innerColor: ["#2586EE", "#67EB7D", "#E5FC64", "#F0C34B", "#E4871D", "#E55151"],
    innerCircle: data,
  };
  personHouseData.getForeignPlacePurchaseAreaData = params;
};
const getForeignPlacePurchaseAgePieFun = async () => {
  let { data } = await getForeignPlacePurchaseAgePie({
    cityCode: cityObj1.value.code,
    startDate: monthRange1.value[0],
    endDate: monthRange1.value[1],
  });
  let params = {
    innerColor: ["#2586EE", "#67EB7D", "#E5FC64", "#F0C34B", "#E4871D", "#E55151"],
    innerCircle: data,
  };
  personHouseData.getForeignPlacePurchaseAgePieData = params;
};

const allFun = () => {
  getPurchaseAreaBarFun1();
  getPurchaseAreaBarFun2();
  getPurchaseAreaBarFun3();
  getPurchaseAreaBarFun4();
  getPurchaseProportionFun();
  getForeignPlacePurchaseAreaPieFun();
  getForeignPlacePurchaseAgePieFun();
  getPurchaseAspirationStatisticsBarFun();
  getPurchaseAspirationStatisticsLineFun();
  personHouseMiddle();
};

const cityObj = ref<any>({
  name: "",
  code: "210000",
}); // 地图-城市code信息
const cityObj1 = ref<any>({
  name: "",
  code: "210000",
}); // 地图-城市code信息
const mapList = ref<any>([
  { name: "沈阳市", code: "210100" },
  { name: "大连市", code: "210200" },
  { name: "鞍山市", code: "210300" },
  { name: "抚顺市", code: "210400" },
  { name: "本溪市", code: "210500" },
  { name: "丹东市", code: "210600" },
  { name: "锦州市", code: "210700" },
  { name: "营口市", code: "210800" },
  { name: "阜新市", code: "210900" },
  { name: "辽阳市", code: "211000" },
  { name: "盘锦市", code: "211100" },
  { name: "铁岭市", code: "211200" },
  { name: "朝阳市", code: "211300" },
  { name: "葫芦岛市", code: "211400" },
]);
const currentMonthAccumulationTabs = [
  {
    label: "户型",
    value: 1,
  },
  {
    label: "房型",
    value: 2,
  },
  {
    label: "面积区间",
    value: 3,
  },
  {
    label: "价格区间",
    value: 4,
  },
];

// 放大图片
const fullSc = (componentName: any, componentParams: any) => {
  personHouseData.dialogVisible = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
};
const fullScMap = (componentName: any, componentParams: any) => {
  personHouseData.dialogVisibleMap = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
};

// 返回首页
const goBackHomePage = () => {
  router.go(-1);
};

// 模块切换城市
const changeCity = (cityCode: any) => {
  cityObj.value.code = cityCode;
  personHouseMiddle();
};
const changeCity1 = (cityCode: any) => {
  cityObj1.value.code = cityCode;
  getForeignPlacePurchaseAreaPieFun();
  getForeignPlacePurchaseAgePieFun();
  getPurchaseAreaBarFun4();
};

// 月范围筛选
const changeMonthRange = (val: any) => {
  monthRange.value = [val[0], val[1]];
  personHouseMiddle();
};
const changeMonthRange2 = (val: any) => {
  monthRange2.value = [val[0], val[1]];
  getPurchaseProportionFun();
};
const changeMonthRange3 = (val: any) => {
  monthRange3.value = [val[0], val[1]];
  getPurchaseAreaBarFun1();
};
const changeMonthRange4 = (val: any) => {
  monthRange4.value = [val[0], val[1]];
  getPurchaseAreaBarFun2();
};
const changeMonthRange5 = (val: any) => {
  monthRange5.value = [val[0], val[1]];
  getPurchaseAreaBarFun3();
};
const changeMonthRange6 = (val: any) => {
  monthRange6.value = [val[0], val[1]];
  getPurchaseAspirationStatisticsBarFun();
  getPurchaseAspirationStatisticsLineFun();
};
const changeMonthRange1 = (val: any) => {
  monthRange1.value = [val[0], val[1]];
  getForeignPlacePurchaseAreaPieFun();
  getForeignPlacePurchaseAgePieFun();
  getPurchaseAreaBarFun4();
};

onMounted(() => {
  if (route && route.query) {
    cityObj.value.code = "210100";
    cityObj1.value.code = "210000";
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    let startTime = year + "-01"; // 当前年的1月份
    let endTime = year + "-" + (month < 10 ? "0" + month : month);
    monthRange.value = [startTime, endTime];
    monthRange1.value = [startTime, endTime];
    monthRange2.value = [startTime, endTime];
    monthRange3.value = [startTime, endTime];
    monthRange4.value = [startTime, endTime];
    monthRange5.value = [startTime, endTime];
    monthRange6.value = [startTime, endTime];
  }
  allFun();
});
</script>

<style scoped lang="less">
.fz12 {
  font-size: 12px !important;
}
.fz14 {
  font-size: 14px !important;
}
.ml15 {
  margin-left: 0px !important;
}
.h263 {
  height: 240px !important;
}
.h222 {
  height: 222px !important;
}
.h184 {
  height: 184px !important;
}
.h558 {
  height: 558px !important;
}

.dw {
  position: absolute;
  top: 50px;
  left: 210px;
  font-size: 16px;
}

.big-screen {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 20px;
  height: 20px;
  background-image: url("@/assets/img/propertyWatch/fd.png");
  background-size: 100% 100%;
  cursor: pointer;
  z-index: 1;
}

.page-header-title1 {
  font-weight: bold;
  font-size: 24px;
  color: #ffffff;
  line-height: 43px;
  text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
  text-align: left;
  margin-top: 16px;
  margin-bottom: 22px;
  position: relative;

  .page-header-filtrate {
    position: absolute;
    display: flex;
    align-items: center;
    top: 0px;
    right: 0px;

    .filtrate-city {
      width: 120px;

      /deep/ .el-select__wrapper {
        font-size: 15px;
      }

      //   margin-right: 30px;
    }

    .page-header-filtrate-month-range {
      margin-top: 5px;
      margin-left: 10px;
      /deep/ .el-range-input,
      /deep/ .el-range-separator {
        font-size: 15px;
        font-weight: lighter;
      }
    }
  }
}
.page-header-filtrate1 {
  width: 150px;
  position: absolute;
  left: 60px;
}
.page-header-filtrate2 {
  width: 150px;
  position: absolute;
  right: 0px;
}
.page-header-title1::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  box-shadow: 0px 0px 0px 1px rgba(108, 224, 255, 0.17);
  background: linear-gradient(90deg, rgba(37, 143, 255, 0) 0%, #318cff 3%, rgba(96, 249, 244, 0.61) 87%, rgba(17, 146, 255, 0) 100%);
}
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyDevelopmentConstruction/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: 100px;
    background-image: url("@/assets/img/housePropertyDevelopmentConstruction/header-bg.png");
    background-size: 100% 100%;

    &-title {
      position: absolute;
      left: 50px;
      font-size: 35px;
      color: #a6edff;
      text-shadow: 0px 0px 5px rgba(93, 222, 255, 0.64), 0px 2px 4px rgba(0, 0, 0, 0.5);
    }

    .bcak-home-btn {
      position: absolute;
      top: 52px;
      right: 50px;
      font-size: 20px;
      color: #7bebed;
      cursor: pointer;
    }
  }

  .main-content {
    padding: 0 20px;
    margin-top: 16px;
    .module-item {
      width: 100%;
      &-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
        height: 30px;
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-header-bg.png");
        background-size: 100% 100%;

        > span {
          font-size: 15px;
          color: white;
          margin-left: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        &-tabs {
          position: absolute;
          right: 50px;
        }
      }

      &-content {
        background-image: url("@/assets/img/housePropertyDevelopmentConstruction/module-content-bg.png");
        background-size: 100% 100%;
        position: relative;

        .module-item-chart-tabs {
          position: absolute;
          right: 0;
          top: 5px;
        }
      }
    }
  }
}

:deep(.el-tabs) {
  display: flex;
  align-items: center;

  .el-tabs__header {
    margin: 0;
  }

  .el-tabs__nav-wrap:after {
    height: 0;
  }

  .el-tabs__active-bar {
    height: 0;
  }

  .el-tabs__item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    height: 20px;
    cursor: pointer;
    color: white;
    background: rgb(9, 31, 63);
    padding: 0 10px !important;
  }

  .el-tabs__item.is-active {
    background: #2187f4;
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__title {
    font-size: 30px;
    color: white;
  }

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>
